<template>
    <div class="mainbox">
        <div>
            <img class="logo" src="../assets/notebook1.svg" alt="logo" height="128" width="128">
        </div>
        <div class="Inputbox">
            <div id="title">
                周报管理系统
            </div>
            <form id="form1" action="localhost:8001/user/login" method="post" target="_blank">
                <div>
                    <label>
                        <input class="Input" name="user.username" type="text" placeholder="用户名">
                    </label>
                </div>
                <div>
                    <label>
                        <input class="Input" name="user.password" type="password" placeholder="密码">
                    </label>
                </div>
                <div>
                    <button class="button-login" type="submit">
                        登录
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>
    div.mainbox {
        text-align: center;
        background-image: url(../assets/bg.jpeg);
        background-color: #b8e5f8;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }

    img.logo {
        margin-top: 70px;
        margin-bottom: 40px;
    }

    div.Inputbox {
        /*background: white;*/
        margin: 0 auto;
        height: 200px;
        width: 400px;
        background-color: rgba(255, 255, 255, 0.8);
    }

    #title {
        font-family: 幼圆;
        font-size: 25px;
    }

    .Input {
        width: 85%;
        border: none;
        height: 48px;
        border-bottom: 1px solid #bbb;
        background-color: transparent;
    }

    .Input:focus {
        outline: none;
    }

    .button-login {
        width: 85%;
        margin-top: 20px;
        height: 36px;
        background-color: rgba(0, 92, 230, 0.5);
        border: none;
    }
</style>